<template>
  <div class="admin">
    <!-- 左侧菜单栏 -->
    <sidebar />

    <div class="admin-main" :class="{'sidebar-collapse': isCollapse}">
      <!-- 顶部操作栏  -->
      <admin-header />

      <!-- 主页显示内容 -->
      <section class="main-section" :class="{'main-tag': tagsView, 'main-top': fixedHeader}">

        <!-- 主入口标签页 -->
        <el-card shadow="never" class="main-content">
          <!-- 类似Router-View的功能 -->
<!--          <nuxt keep-alive :keep-alive-props="{ include: cachePages }" />-->
          <Nuxt />

        </el-card>

      </section>

      <!-- 右侧抽屉（设置相关属性） -->
<!--      <right-panel v-show="showSettings">
        <settings />
      </right-panel>-->

      <!-- 右侧抽屉（设置相关属性） -->
      <el-drawer
        size="17%"
        :visible="showSettings"
        :with-header="false"
        :before-close="closeDrawerHandle"
        >
        <settings />
      </el-drawer>

    </div>
  </div>
</template>

<script>
  import Sidebar from '@/components/common/admin/sidebar'
  import AdminHeader from '@/components/common/admin/header'
  import RightPanel from '@/components/common/right-panel'
  import Settings  from '@/components/common/right-panel/settings'

  /*
    后台管理模板
   */
  export default {
    name: "admin",
    components: {
      Sidebar,
      AdminHeader,
      RightPanel,
      Settings
    },
    computed: {
      // 是否显示右侧抽屉
      showSettings: {
        get() {
          return this.$store.state.settings.showSettings
        },
        set(val) {
          this.$store.dispatch('settings/changeSetting', {
            key: 'showSettings',
            value: val
          })
        }

      },
      // 侧边菜单栏是否折叠
      isCollapse() {
        return this.$store.state.settings.isCollapse
      },
      // 菜单标签是否显示
      tagsView() {
        return this.$store.state.settings.tagsView
      },
      // keep-alive缓存的页面列表
      cachePages() {
        if (this.$store.state.settings.tagsView) {
          return  this.$store.state.menu.cachePages
        } else {
          return []
        }
      },
      // 是否固定顶部元素
      fixedHeader() {
        return this.$store.state.settings.fixedHeader
      }
    },
    methods: {
      /**
       * 关闭布局设置抽屉事件
       */
      closeDrawerHandle() {
        this.showSettings = false
      }
    }
  }
</script>

<style>
.admin {
  /*min-height: 100vh;*/
  position: relative;
  height: 100%;
  width: 100%;
}
.admin .admin-main {
  min-height: 100%;
  transition: margin-left .28s;
  margin-left: 210px;
  position: relative;
}
.admin .admin-main.sidebar-collapse {
  margin-left: 54px;
}
.admin .admin-main .main-section {
  width: 100%;
  /*position: relative;*/
  overflow: hidden;
}
.admin .admin-main .main-section .main-content {
  margin: 10px;
  font-family: 'Microsoft YaHei', serif;
}
.admin .admin-main .main-top {
  padding-top: 50px;
}
.admin .admin-main .main-tag.main-top {
  padding-top: 90px;
}
</style>

<style scoped>
/deep/.el-card__body {
  padding: 10px;
}
</style>

